/**
 * Created by 2019/3/11/011
 * Author: Admin
 */
import React, {Component} from 'react';
// import {Link} from 'react-router-dom'
import {Divider, Table} from 'antd';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={
            userList : [
                {
                    id: 100,
                    name: '林xx',
                    age: 18
                }, {
                    id: 104,
                    name: '黄xx',
                    age: 20
                }, {
                    id: 106,
                    name: '王xx',
                    age: 30
                }
            ]
        }
    }
    routerTo(v) {
        this.props.history.push({pathname: `/menu/Detail/${v.id}`, state: {data: v}})
    }

    deleteTo(index){
        this.state.userList.splice(index,1);
        this.setState({
            userList:this.state.userList
        })
    }


    render() {
        // console.log(this.props.location)
        const { userList } = this.state;
        const columns = [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '操作',
            key: 'action',
            align:'right',
            render: (text, record,index) => (  // @param text 当前行的值; @param record 当前行数据 @param index 行索引
                <span>
                 <a onClick={() => this.routerTo(record)}>跳转-Invite</a>
                    <Divider type="vertical"/>
                    <a onClick={() => this.deleteTo(index)}>Delete</a>
                </span>
            ),
        }
        ];

        return (

            <div>
                {/*<button onClick={()=>this.props.history.push('/')}>Home页面</button>*/}
                {/*<ul>*/}
                    {/*{*/}
                        {/*userList.map(v => {*/}
                            {/*return <li key={v.id}>*/}
                                {/*<button onClick={() => this.routerTo(v)}>跳转到详情页面</button>*/}
                            {/*</li>*/}
                        {/*})*/}
                    {/*}*/}
                {/*</ul>*/}
                <Table columns={columns} dataSource={userList}/>
            </div>

        )
    }


}

export default Home